<template>
  <!-- 库存查询页面 -->
  <div class="app-container">
    <!-- 主tab栏开始 -->
    <el-tabs v-model="activeName" :stretch="true" @tab-click="handleClick">
      <!-- 药品信息tab栏 -->
      <el-tab-pane label="药品总库存" name="medicinesItem">
        <!-- 查询条件开始 -->
        <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
          <el-form-item label="药品名称" prop="medicinesName">
            <el-input v-model="queryParams.medicinesName" placeholder="请输入药品名称" clearable size="small" style="width:180px" />
          </el-form-item>
          <el-form-item label="关键字" prop="keywords">
            <el-input v-model="queryParams.keywords" placeholder="请输入搜索关键字" clearable size="small" style="width:180px" />
          </el-form-item>

          <el-form-item label="药品类型" prop="medicinesType">
            <el-select v-model="queryParams.medicinesType" placeholder="药品类型" clearable size="small" style="width:180px">
              <el-option v-for="dict in medicinesTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
            </el-select>
          </el-form-item>
          <el-form-item label="生产厂家" prop="producterId">
            <el-select v-model="queryParams.producterId" placeholder="生产厂家" clearable size="small" style="width:180px">
              <el-option v-for="dict in producterOptions" :key="dict.producterId" :label="dict.producterName" :value="dict.producterId" />
            </el-select>
          </el-form-item>
          <el-form-item label="处方类型" prop="prescriptionType">
            <el-select v-model="queryParams.prescriptionType" placeholder="处方类型" clearable size="small" style="width:180px">
              <el-option v-for="dict in prescriptionTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker v-model="dateRange" size="small" style="width:240px" value-format="yyyy-MM-dd" type="daterange"
              range-separator="-" start-placeholde="开始日期" end-placeholde="结束日期" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- 查询条件结束 -->
        <!-- 数据表格开始 -->
        <el-table v-loading="loading" border :data="medicinesTableList">
          <el-table-column label="药品ID" align="center" prop="medicinesId" />
          <el-table-column label="药品名称" align="center" prop="medicinesName" />
          <el-table-column label="药品编号" align="center" prop="medicinesNumber" />
          <el-table-column label="生产厂家" show-overflow-tooltip width="200px" align="center" prop="producterId"
            :formatter="producterFormatter" />
          <el-table-column label="药品类型" align="center" prop="medicinesType" :formatter="medicinesTypeFormatter" />
          <el-table-column label="处方类型" align="center" prop="prescriptionType" :formatter="prescriptionFormatter" />
          <el-table-column label="关键字" align="center" prop="keywords" />
          <el-table-column label="库存量" align="center" prop="medicinesStockNum" />
          <el-table-column label="预警值" align="center" prop="medicinesStockDangerNum" />
          <el-table-column label="创建时间" width="180px" align="center" prop="createTime" />
        </el-table>
        <!-- 数据表格结束 -->
        <!-- 分页控件开始 -->
        <el-pagination v-show="total>0" :current-page="queryParams.pageNum" :page-sizes="[5, 10, 20, 30]" :page-size="queryParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
        <!-- 分页控件结束 -->

      </el-tab-pane>
      <!-- 入库信息tab栏 -->
      <el-tab-pane label="批次库存及价格" name="iniventoryItem">
        <!-- 查询条件开始 -->
        <el-form ref="queryLogForm" :model="queryLogParams" :inline="true" label-width="90px">
          <el-form-item label="采购单据号" prop="purchaseId">
            <el-input v-model="queryLogParams.purchaseId" placeholder="请输入采购单据号" clearable size="small" style="width:180px" />
          </el-form-item>
          <el-form-item label="药品名称" prop="medicinesName">
            <el-input v-model="queryLogParams.medicinesName" placeholder="请输入药品名称" clearable size="small" style="width:180px" />
          </el-form-item>

          <el-form-item label="药品类型" prop="medicinesType">
            <el-select v-model="queryLogParams.medicinesType" placeholder="药品类型" clearable size="small" style="width:180px">
              <el-option v-for="dict in medicinesTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
            </el-select>
          </el-form-item>
          <el-form-item label="生产厂家" prop="producterId">
            <el-select v-model="queryLogParams.producterId" placeholder="生产厂家" clearable size="small" style="width:180px">
              <el-option v-for="dict in producterOptions" :key="dict.producterId" :label="dict.producterName" :value="dict.producterId" />
            </el-select>
          </el-form-item>
          <el-form-item label="处方类型" prop="prescriptionType">
            <el-select v-model="queryLogParams.prescriptionType" placeholder="处方类型" clearable size="small" style="width:180px">
              <el-option v-for="dict in prescriptionTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker v-model="dateRange" size="small" style="width:240px" value-format="yyyy-MM-dd" type="daterange"
              range-separator="-" start-placeholde="开始日期" end-placeholde="结束日期" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- 查询条件结束 -->
        <!-- 数据表格开始 -->
        <el-table v-loading="loading" border :data="inventoryLogTableList">
           <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="入库号">
                  <span>{{ props.row.inventoryLogId }}</span>
                </el-form-item>
                <el-form-item label="单据号">
                  <span>{{ props.row.purchaseId }}</span>
                </el-form-item>
                <el-form-item label="规格">
                  <span>{{ props.row.conversion }}{{ props.row.unit }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="药品ID" align="center" prop="medicinesId" />
          <el-table-column label="药品名称" align="center" prop="medicinesName" />
          <el-table-column label="采购量" align="center" prop="inventoryLogNum" />
          <el-table-column label="批发价" align="center" prop="tradePrice" />
          <el-table-column label="批发额" align="center" prop="tradeTotalAmount" />
          <el-table-column label="批次号" align="center" prop="batchNumber" />
          <el-table-column label="生产厂家" show-overflow-tooltip width="200px" align="center" prop="producterId"
            :formatter="producterFormatter" />
          <el-table-column label="药品类型" align="center" prop="medicinesType" :formatter="medicinesTypeFormatter" />
          <el-table-column label="处方类型" align="center" prop="prescriptionType" :formatter="prescriptionFormatter" />
          <el-table-column label="入库时间" width="180px" align="center" prop="createTime" />
        </el-table>
        <!-- 数据表格结束 -->
        <!-- 分页控件开始 -->
        <el-pagination v-show="total>0" :current-page="queryLogParams.pageNum" :page-sizes="[5, 10, 20, 30]" :page-size="queryLogParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="totalLog" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
        <!-- 分页控件结束 -->

      </el-tab-pane>
    </el-tabs>
    <!-- 主tab栏结束 -->

  </div>
</template>
<script>
  // 引入api
  import {
    selectAllProducter
  } from '@/api/erp/producter'
  import {
    listMedicinesForPage
  } from '@/api/erp/medicines'
  import {
    listInventoryLogForPage
  } from '@/api/erp/inventoryLog'
  export default {
    // 定义页面数据
    data() {
      return {
        // 主tab栏选择的数据
        activeName: 'medicinesItem',
        // 是否启用遮罩层
        loading: false,
        // 药品数据总条数
        total: 0,
        // 入库详情数据总条数
        totalLog: 0,
        // 药品字典表格数据
        medicinesTableList: [],
        // 入库详情字典表格数据
        inventoryLogTableList: [],
        // 药品类型数据字典
        medicinesTypeOptions: [],
        // 生产厂家数据字典
        producterOptions: [],
        // 处方类型数据字典
        prescriptionTypeOptions: [],
        // 日期查询参数
        dateRange: [],
        // 药品查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          medicinesName: undefined,
          keywords: undefined,
          medicinesType: undefined,
          producterId: undefined,
          prescriptionType: undefined
        },
        // 入库详情查询参数
        queryLogParams: {
          pageNum: 1,
          pageSize: 10,
          purchaseId: undefined,
          medicinesName: undefined,
          medicinesType: undefined,
          producterId: undefined,
          prescriptionType: undefined
        }
      }
    },
    // 勾子
    created() {
      // 查询药品类型数据字典
      this.getDataByType('his_medicines_type').then(res => {
        this.medicinesTypeOptions = res.data
      })
      // 查询生产厂家数据
      selectAllProducter().then(res => {
        this.producterOptions = res.data
      })
      // 查询处方类型数据字典
      this.getDataByType('his_prescription_type').then(res => {
        this.prescriptionTypeOptions = res.data
      })
      // 查询表格数据
      this.getMedicinesList()
    },
    // 方法
    methods: {
      // 切换tab时触发
      handleClick(tab, event) {
        console.log(tab, event);
        if (this.activeName === 'medicinesItem') {
          this.getMedicinesList()
        } else if (this.activeName === 'iniventoryItem') {
          this.getInventoryList()
        }
      },
      // 查询表格数据
      getMedicinesList() {
        this.loading = true // 打开遮罩
        listMedicinesForPage(this.addDateRange(this.queryParams, this.addDateRange)).then(res => {
          this.medicinesTableList = res.data
          this.total = res.total
          this.loading = false // 关闭遮罩
        })
      },
      // 查询入库记录表格数据
      getInventoryList() {
        this.loading = true // 打开遮罩
        listInventoryLogForPage(this.addDateRange(this.queryLogParams, this.addDateRange)).then(res => {
          this.inventoryLogTableList = res.data
          this.totalLog = res.total
          this.loading = false
        })
      },
      // 条件查询
      handleQuery() {
        if (this.activeName === 'medicinesItem') {
          this.getMedicinesList()
        } else if (this.activeName === 'iniventoryItem') {
          this.getInventoryList()
        }
      },
      // 重置查询条件
      resetQuery() {
        if (this.activeName === 'medicinesItem') {
          this.resetForm('queryForm')
          // 重置时间
          this.dateRange = []
          this.getMedicinesList()
        } else if (this.activeName === 'iniventoryItem') {
          this.resetForm('queryLogForm')
          // 重置时间
          this.dateRange = []
          this.getInventoryList()
        }
      },
      // 分页pageSize变化时触发
      handleSizeChange(val) {


        if (this.activeName === 'medicinesItem') {
          this.queryParams.pageSize = val
          // 重新查询
          this.getMedicinesList()
        } else if (this.activeName === 'iniventoryItem') {
          this.queryLogParams.pageSize = val
          // 重新查询
          this.getInventoryList()()
        }
      },
      // 点击上一页  下一页，跳转到哪一页面时触发
      handleCurrentChange(val) {
        if (this.activeName === 'medicinesItem') {
          this.queryParams.pageNum = val
          // 重新查询
          this.getMedicinesList()
        } else if (this.activeName === 'iniventoryItem') {
          this.queryLogParams.pageNum = val
          // 重新查询
          this.getInventoryList()
        }
      },
      // 翻译生产厂家
      producterFormatter(row) {
        let name = '' // 翻译完成的值
        this.producterOptions.filter(item => {
          if (parseInt(item.producterId) === parseInt(row.producterId)) {
            name = item.producterName
          }
        })
        return name
      },
      // 翻译药品类型
      medicinesTypeFormatter(row) {
        return this.selectDictLabel(this.medicinesTypeOptions, row.medicinesType)
      },
      // 翻译处方类型
      prescriptionFormatter(row) {
        return this.selectDictLabel(this.prescriptionTypeOptions, row.prescriptionType)
      }
    }
  }
</script>
<style scoped>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
